<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <title>Profile</title>
    <link href="./image/atreez_icon.png" rel="icon" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1027896_i6miv9jvjqj.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dialog2.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper/js/swiper.js"></script>
    <script src="./js/layer/layer.js"></script>
    <script src="./js/common.js"></script>
    <script src="//at.alicdn.com/t/font_1027896_0xnwac8ptz4q.js"></script>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
<div class="container profile">
    <div class="header">
        <ul class="list-inline nav-tabs">
            <li class="pull-left ml-10"><a href="javascript:history.back(-1);"><i class="iconfont icon-btn_back"></i></a></li>
            <li class="pull-left">My Page</li>
        </ul>
    </div>
    <div class="row content mlr-16">
        <div class="header-title">Profile</div>
        <div class="photo text-center mt-33">
            <div class="image">
                <img src="./image/13.png" class="img-responsive">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-ic_photo"></use>
                </svg>
            </div>
        </div>
        <div class="sign-in-form">
            <form class="profile-form" method="post">
                <div class="name mt-24">
                    <div class="title">Use Name</div>
                    <input name="name" value="Walker838" type="text" class="form-control mt-4" autocomplete="off">
                </div>
                <div class="email mt-12">
                    <div class="title">Email</div>
                    <input name="email" value="183851063@qq.com" type="text" class="form-control mt-4 readonly" autocomplete="off" readonly>
                </div>
                <div class="address mt-40">
                    <div class="title">Address</div>
                    <div class="mt-10 address-info">
                        <div class="first-line line">
                            <div class="name pull-left">Kota Li</div>
                            <div class="phone pull-left ml-10">+62 21 29465000<i class="pull-right iconfont icon-bianji line"></i></div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="second-line line">
                            <div class="area-info">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                        </div>
                    </div>
                </div>
                <div class="password mt-40">
                    <div class="title">New Password</div>
                    <input name="password" value="" type="password" class="form-control mt-5" autocomplete="off">
                </div>
                <div class="password mt-12">
                    <div class="title">Repeat Password</div>
                    <input name="repeat-password" value="" type="password" class="form-control mt-5" autocomplete="off">
                </div>
            </form>
        </div>
        <div class="btn-default-black text-center mt-50 btn-submit mb-30">
            <span>Save</span>
        </div>
    </div>
</div>
<div class="dialog-container" data-spm="dialog">
    <div class="dialog-wrapper"></div>
    <div class="dialog dialog-popup">
        <div class="dialog-close"><i class="iconfont icon-below-line"></i></div>
        <div class="dialog-content mlr-16">
            <div class="dialog-address-list">
                <div class="dialog-title mt-20">Please choose an address</div>
                <div class="address-item mt-24">
                    <div class="address-box pull-left"><i class="iconfont icon-circle-chose"></i></div>
                    <div class="address-div pull-left pt-10">
                        <div class="name-tel ml-10"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                        <div class="area-info ml-10">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                    </div>
                    <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="address-item mt-24">
                    <div class="address-box pull-left"><i class="iconfont icon-circle"></i></div>
                    <div class="address-div pull-left pt-10">
                        <div class="name-tel ml-10"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                        <div class="area-info ml-10">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                    </div>
                    <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="address-item mt-24">
                    <div class="address-box pull-left"><i class="iconfont icon-circle"></i></div>
                    <div class="address-div pull-left pt-10">
                        <div class="name-tel ml-10"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                        <div class="area-info ml-10">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                    </div>
                    <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="address-item mt-24">
                    <div class="address-box pull-left"><i class="iconfont icon-circle"></i></div>
                    <div class="address-div pull-left pt-10">
                        <div class="name-tel ml-10"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                        <div class="area-info ml-10">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                    </div>
                    <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="address-item mt-24">
                    <div class="address-box pull-left"><i class="iconfont icon-circle"></i></div>
                    <div class="address-div pull-left pt-10">
                        <div class="name-tel ml-10"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                        <div class="area-info ml-10">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                    </div>
                    <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="btn-default-black mlr-16 text-center add-address-btn">
            <div class="sku-btn">Add New Address</div>
        </div>
    </div>

</div>
</body>
<script>
    $(function () {
        $('.btn-submit').click(function () {
            location.href = 'login.html';
        })

        var len = 35
                ,area = $('.address-info .area-info')
                ,content = area.html();      //默认显示字数
        if(content.length > len){
            var inhtml = content.substring(0,len) + '...';
            area.html(inhtml);
        }

        var len =30;      //默认显示字数
        $('.dialog-address-list .area-info').each(function(){
            var content = $(this).html();
            if(content.length > len){
                var inhtml = content.substring(0,len) + '...';
                $(this).html(inhtml);
            }
        });

        function replaceAddress(obj) {
            var name = obj.find('.name').html()
                    ,phone = obj.find('.phone').html()
                    ,area_info = obj.find('.area-info').html()
                    ,html = '<div class="first-line line">\
                            <div class="name pull-left">'+name+'</div>\
                            <div class="phone pull-left ml-10">'+phone+'<i class="pull-right iconfont icon-bianji"></i></div>\
                            <div class="clearfix"></div>\
                        </div>\
                        <div class="second-line line">\
                                <div class="area-info">'+area_info+'</div>\
                        </div>';
            $('.address-info').html(html);
            $('.dialog-close').trigger('click')
        }

        $('.address-item .address-edit').click(function () {
            location.href = 'edit-address.html';
        })



    })
</script>
</body>
</html>